<style>
@import '../../../static/zTree/css/metroStyle/metroStyle.css';
</style>
<template>
  <div>
      <ul id='zTree' class='ztree'></ul>
  </div>
</template>
<script>
import $ from 'jquery';
import '../../../static/zTree/js/jquery.ztree.core.js';
import '../../../static/zTree/js/jquery.ztree.excheck.min.js';
export default {
    name: 'zTree',
    componets: {},
    data () {
        return {
            setting: {
                check: {
                    enable: true,
                    chkboxType: { 'Y': 'ps', 'N': 's' }
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                view: {
                    showIcon: false
                }
            },
            treeObj: {}
        };
    },
    props: {
        zNodes: {
            type: Array,
            default () {
                return [];
            }
        }
    },
    methods: {
        initTree (val) {
            this.treeObj = $.fn.zTree.init($('#zTree'), this.setting, val);
            this.$emit('result', this.treeObj);
        }
    },
    mounted () {
        this.initTree(this.zNodes);
    },
    watch: {
        zNodes: {
            deep: true,
            handler: function (val) {
                this.initTree(val);
            }
        }
    }
};
</script>

